<template>
	<view>
		<u-search placeholder="添加用户" v-model="keyword" shape="round" @change="change" @search="onSearch"
			@custom="goBack" actionText="取消" margin="20rpx"></u-search>
		<view>
			<ul>
				<li>
					<view class="left">
						<image
							src="https://static1.keepcdn.com/avatar/2021/06/18/14/35/b2b57367f748407d5b4dce7afe6e4359a6568202.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x"
							mode=""></image>
					</view>
					<text>爱健身的煜妹</text>
					<view>
						<u-icon name="man-add" size="50"></u-icon>
					</view>
				</li>
				<li>
					<view>
						<image
							src="https://static1.keepcdn.com/avatar/2021/06/18/14/35/b2b57367f748407d5b4dce7afe6e4359a6568202.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x"
							mode=""></image>

					</view>
					<text>爱健身的煜妹</text>
					<view>
						<u-icon name="man-add" size="50"></u-icon>
					</view>
				</li>
				<li>
					<view>
						<image
							src="https://static1.keepcdn.com/avatar/2021/06/18/14/35/b2b57367f748407d5b4dce7afe6e4359a6568202.jpg?imageMogr2/format/webp/ignore-error/1/thumbnail/96x"
							mode=""></image>
					</view>
					<text>爱健身的煜妹</text>
					<view>
						<u-icon name="man-add" size="50"></u-icon>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: ''
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			onSearch(val) {
				console.log(val);
			}
		}
	}
</script>

<style lang="scss">
	ul {
		list-style: none;

		li {
			width: 90%;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 10px 0px;

			.left {
				height: 50px;
				line-height: 50px;
			}

			image {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
	}
</style>
